$(function () {
    // ***********************加载用户列表
    //引用分页器
    let laypage = layui.laypage;
    let layer = layui.layer;
    let form = layui.form;
    //分页器的参数
    let data = {
        pagenum: 1,
        pagesize: 5,
    };
    //封装加载用户列表
    function list() {
        $.ajax({
            url: '/admin/users',
            data: data,
            success: function (res) {
                $("tbody").html("");
                if (res.status == 0) {
                    $("tbody").html("");
                    res.data.forEach(function (ere) {
                        let one = $(`<tr>
                      <td>${ere.id}</td>
                      <td>${ere.username}</td>
                      <td>${ere.nickname}</td>
                      <td>${ere.email}</td>
                      <td>
                        <button type="button" class="layui-btn layui-btn-xs edit">
                          <a style="color: #fff" target="iframeArea" href="./edit.html?id=${ere.id}">编辑</a>
                        </button>
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete deluser" id_del="${ere.id}">删除</button>
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-normal delete resetuser" id_rese="${ere.id}">重置密码</button>
                      </td>
                    </tr>`);
                        $("tbody").append(one);
                    });

                    // 初始化分页器
                    bar(res.total);
                }
            }
        })
    }
    //打开页面自调用
    list();
    //分页器
    function bar(count) {
        laypage.render({
            elem: 'articlePage', // 注意，这里的 test1 是 ID，不用加 # 号
            count: count, // 数据总数，从服务端得到,
            limit: data.pagesize, // limit限制 每页显示几条数据
            curr: data.pagenum,
            limits: [2, 3, 5, 10], // 下拉框的值，表示每页多少条，选择每页显示几条
            layout: ['prev', 'page', 'next', 'limit', 'skip'], // 辅助
            // 当用户点击页面跳转的时候：
            jump: function (obj, first) {
                // 用户自己点击 跳转
                if (first == undefined) {
                    // obj是用户操作后对象数据  obj.curr
                    data.pagenum = obj.curr;
                    data.pagesize = obj.limit;
                    // ajax
                    list();
                }
            }
        });
    }


    // ************************删除用户
    $('tbody').on('click', '.deluser', function () {
        //获取id值
        let id = $(this).attr("id_del");
        //ajax
        layer.confirm('确定要删除么?', function (index) {

            $.ajax({
                // 动态URL地址：  :id  代表动态传入id值
                url: "/admin/users/" + id,
                type: 'DELETE',
                success: function (res) {
                    layer.msg(res.message);
                    // 重回第一页
                    data.pagenum = 1;
                    list();
                    layer.close(index);
                }
            });

        });
    })
    //************************编辑

    function fn() {
        console.log(1);
    }


    // ***********************重置密码的form表单

    let str = `<form id="repwd-form" class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
          <input type="text" name="password" required lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input mm">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-block">
          <input type="text" required lay-verify="required|psw" placeholder="请重复输入新密码" autocomplete="off" class="layui-input rmm">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`;


    form.verify({
        psw: function (value, item) { //value：表单的值、item：表单的DOM对象
            if ($('.mm').val() != $('.rmm').val()) {
                return '用户确认密码输入有误';
            }
        }
    });

    $('tbody').on('click', '.resetuser', function () {
        let index = layer.open({
            type: 1,
            title: "重置密码",
            content: str,
            area: ['500px', '270px'],
        });
        let id = $(this).attr('id_rese');
        $('#repwd-form').on('submit', function (e) {
            e.preventDefault();
            let data = $(this).serialize();
            $.ajax({
                url: '/admin/users/' + id,
                type: 'PUT',
                data: data,
                success: function (res) {
                    if (res.status == 0) {
                        layer.msg(res.message)
                        layer.close(index)
                    }
                }
            })
        })
    });







})